{% extends 'htmls/base_template.html' %}
{% load static %}

{% block top_script_section %}
    <script type="application/javascript">
        var account_list = {};

        function add_account(update) {
            var url = "";

            if (update){
                url = "{{ edit_account_url }}";
            } else {
                url = "{{ add_account_url }}"
            }

            if (!validate_form_ex('id_account_form', {
                rules: {
                    username: {
                        required: true,
                        maxLength: 50
                    },

                    email: {
                        required: true
                    },

                    password: {
                        minLength: 6,
                        maxLength:255
                    },

                    password_confirm: {
                        equalTo: $('input[name="password"]')
                    },
                    role: {
                        required:true
                    }
                },
                messages: {
                    username: {
                        required: "请输入用户名",
                        maxLength: "用户名长度不能大于50个字符"
                    },
                    password: {
                        minLength: "密码长度不能小于6个字符",
                        maxLength: "密码长度不能大于255个字符"
                    },
                    email: {
                        required: "请输入邮件地址"
                    },
                    password_confirm: {
                        equalTo: "密码前后不一致"
                    },
                    role: {
                        required: "请选择要创建的角色"
                    }
                }
            })) {
                return;
            }

            $.ajax({
                type: 'POST',
                dataType: "json",
                data: $('#id_account_form').serialize(),
                url: url,
                async: false,
                success: function (data, status) {},
                error: function() {}
            });

            window.location.href="{{ query_accounts_url }}";
        }

        function show_account_dialog(update, data) {
            var dlg_account = '<div class="dialog_1" id="id_dlg_add_account"> <div class="panel-heading"> <h3 id="id_title" class="panel-title"></h3> </div> <form id="id_account_form" method="post" action="{{ add_account_url }}"> <div class="panel-body"> <!-- 用户名 --> <div class="form-group"> <div class="col-sm10"> <input type="text" class="form-control" name="username" maxlength="50" placeholder="用户名"> </div> </div> <!-- 邮件 --> <div class="form-group"> <div class="col-sm10"> <input type="email" class="form-control" name="email" maxlength="50" placeholder="邮件"> </div> </div> <!-- 密码 --> <div class="form-group"> <div class="col-sm10"> <input type="password" class="form-control" name="password" maxlength="50" placeholder="密码"> </div> </div> <!-- 确认密码 --> <div class="form-group"> <div class="col_sm10"> <input type="password" class="form-control" name="password_confirm" maxlength="50" placeholder="确认密码"> </div> </div><!-- 角色 --> <div class="form-group"> <div class="col_sm10"> <select name="role" class="form-control"> <option value="">--请选择角色--</option> {% for t in roles %} <option value="{{ t }}">{{ t }}</option> {% endfor %} </select> </div> </div><div class="row my_button"> <div class="col-xs-6"> <input class="btn btn-info btn-block" type="button" id="id_btn_add" value=""> </div> <div class="col-xs-6"> <input type="button" class="btn btn-info btn-block" id="id_btn_cancel" value="取消" onclick="close_modal_dialog();"> </div> </div> </div> </form> </div>';
            var acct_obj = $(dlg_account);

            show_modal_dialog(acct_obj);
            if (update) {
                $('#id_title').text("更改账户");
                $("input[name='username']").val(data['username']);
                $("input[name='email']").val(data['email']);
                $("select").val(data['role']);
                $("select").find("option[value="+data['role']+"]").attr("selected",true);
                $('#id_btn_add').on('click', function (){add_account(true);});
                $('#id_btn_add').val("更改");
            } else {
                $('#id_title').text('添加账户');
                $('#id_btn_add').on('click', function(){add_account(false)});
                $('#id_btn_add').val('添加');
            }
        }

        function edit_account(id) {
            var data = account_list[id];

            show_account_dialog(true, data);
        }

        $(document).ready(function () {
            $('#id_btnAdd').on("click", function () {
                show_account_dialog(false);
            });
            $('#id_btn_cancel').on("click", function () {
                close_modal_dialog();
            });
        });
    </script>
{% endblock %}

{% block body_section %}
{% endblock %}
{% block content_section %}
    <div class="panel panel-default" xmlns="http://www.w3.org/1999/html">
        <div class="panel-heading">
            <h3 class="panel-title">账户列表</h3>
        </div>
        <div class="col-sm10">
            {% if "添加账户" in perms %}
                <input type="button" id="id_btnAdd" value="添加">
            {% endif %}

            {% if "删除账户" in perms %}
                <input type="button" value="删除" onclick="delete_multiple_objects();">
            {% endif %}
        </div>
        <div class="panel-body">
            <script type="text/javascript">
                jQuery(document).ready(function () {
                    $("#example-2").dataTable({
                        dom: "t" + "<'row'<'col-xs-6'i><'col-xs-6'p>>",
                        aLengthMenu: [
                            [5, 25, 50, 100, -1], [10, 25, 50, 100, "All"]
                        ],
                        bProcessing: true,
                        bPaginate: true,
                        fnDraw: false,
                        bLengthChange: true,
                        bStateSave: false,
                        bServerSide: true,
                        sServerMethod: "POST",
                        sAjaxSource: "{{ query_account_url }}",
                        fnServerParams: function (aoData) {
                        },
                        columns: [
                            {
                                "data": "username",
                                bSortable: false, "render": function (obj, type, full) {
                                account_list[obj] = full;
                                return '<input type="checkbox" class="cbr" onchange="select_multiple_objects(this, \'username\',\'' + obj + '\');">';
                            }
                            },

                            {"data": "username"},
                            {"data": "email"},
                            {"data": "role"},
                            {"data": "create_time"},
                            {
                                "data": "username",
                                "render": function (obj, type, full) {
                                    return '<a onclick="edit_account(\''+obj+'\');" class="btn btn-secondary btn-sm btn-icon">编辑</a>';
                                }
                            }
                        ],
                        language: {
                            "sLengthMenu": "每页显示 _MENU_ 条结果",
                            "sZeroRecords": "没有匹配结果",
                            "info": "第 _PAGE_ 页 ( 总共 _PAGES_ 页 ,_TOTAL_条)",
                            "sInfoEmpty": "显示第 0 至 0 条结果，共 0 条",
                            "infoFiltered": "(从 _MAX_ 条记录过滤)",
                            "sInfoPostFix": "",
                            "sSearch": "模糊搜索:",
                            "sUrl": "",
                            "sEmptyTable": "表中数据为空",
                            "sLoadingRecords": "载入中...",
                            "sProcessing": "<img src='{% static 'assets/images/loding.gif'%}'/> 正在加载数据...",
                            "sInfoThousands": ",",
                            "oPaginate": {
                                "sFirst": "首页",
                                "sPrevious": "上页",
                                "sNext": "下页",
                                "sLast": "末页"
                            }
                        },
                    });
                });
            </script>
            <table class="table table-bordered table-striped" id="example-2"
                   name="id_data_table">
                <thead>
                <tr>
                    <th></th>
                    <th>用户名</th>
                    <th>邮件地址</th>
                    <th>角色</th>
                    <th>创建日期</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody class="middle-align">
                </tbody>
            </table>
        </div>
    </div>
{% endblock %}